<template>
  <div id="app">
    <div :id="myId" style="width: 90vw;height:40vh;"></div>
  </div>
</template>

<!--PH单独子组件-->
<script>
import * as echarts from 'echarts';
export default {
  name: "ph",
  props:['myId','lineDime','lineSeries','titleName','dataTitle'],
  data(){
    return{

    }
  },
  methods: {
    drawChart() {
      var chartDom = document.getElementById(this.myId);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: this.titleName,
          y:'10px',
          textStyle:{
            //文字颜色
            color:'#061e74',
            //字体风格,'normal','italic','oblique'
            fontStyle:'italic',
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight:'200',
            //字体系列
            fontFamily:'sans-serif',
            //字体大小
            fontSize:18
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          y:'30px',
          data: this.dataTitle
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#3d3738',
              width: 3 // 粗细
            },
            symbol:['none','arrow'],//设置坐标轴箭头
            symbolSize:[8,8],//坐标箭头大小
          },
          axisTick: {
            show: false, //是否显示刻度
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value',
          splitLine:{show:false},
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#3d3739',
              width: 3 // 粗细
            },
            symbol:['none','arrow'],
            symbolSize:[8,8],//坐标箭头大小
          },
          axisTick: {
            show: false, //是否显示刻度
          },
        },
        series: [
          {
            name: this.dataTitle,
            type: 'line',
            stack: 'Total',
            smooth:true,
            symbolSize: 10, //拐点的大小
            itemStyle : { normal: {label : {show: true}}},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          // {
          //   name: this.dataTitle[1],
          //   type: 'line',
          //   stack: 'Total',
          //   smooth:true,
          //   symbolSize: 10, //拐点的大小
          //   itemStyle : { normal: {label : {show: true}}},
          //   data: [220, 182, 191, 234, 290, 330, 310]
          // },
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>>